<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Line-Height - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">line-height</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>]
    [<b><i class="fs">IE3</i></b>|<b class="s">N4</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Dimension Properties</b><br></td>
</tr>
<tr>
    <td><a href="width.htm">width</a><br>
        <a href="minwidth.htm">min-width</a><br>
        <a href="maxwidth.htm">max-width</a><br></td>
    <td><a href="height.htm">height</a><br>
        <a href="minheight.htm">min-height</a><br>
        <a href="maxheight.htm">max-height</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
         <a href="../../propindex/font.htm">Property Index</a> |
         <a href="../../supportkey/syntax.htm">CSS Support History</a> |
         <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0>
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">normal</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>All</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>Yes</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#line-height">CSS1: Sect. 5.4.8</a><br> 
        <a href="http://www.w3.org/TR/REC-CSS2/visudet.html#line-height">CSS2: Sect. 10.8</a>,
        <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">CSS2.1: Sect 10.8</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This property specifies the height of an in-line element box. If the 'line-height'
        value is greater than the value of the 'font-size' for the element, this
        difference (called the "leading") is cut in half (called the "half-leading") and
        distributed evenly on the top and bottom of the in-line box. In this manner, the
        content of an in-line element box is centered within the line-box (assuming no
        'vertical-align' property is also set to change this behavior.) Negative values
        for this property are not allowed. This property is also a component of the
        '<a href="../font/font.htm">font</a>' shorthand property.
        <br><br>

        A few other rules govern line-height calculation:
        <ul type="disc">
        <li>If the computed value for the 'line-height' property is less than the
            computed 'font-size' for an in-line element box, fonts may 'bleed' (overflow)
            the element box.
        <li>If this property is set for a block-level element box that contains in-line
            elements, the value specifies the minimal height of each of the in-line boxes.
        <li>For in-line element boxed, this property specifies the height of the boxes
            generated by the element.
        <li>For in-line replaced elements the height of the element box is given by the
            'height' property instead of the 'line-height' property.
        <li>If an element box contains text in more than one font-size, the 'line-height'
            property should be determined using the largest font-size. This helps to
            create consistent baselines between adjacent line boxes.
        </ul>
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b class="s">N6</b>|<b><i class="fs">O4</i></b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">normal</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE3</i></b>|<b class="s">N4</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Sets the line height to a 'reasonable' value relative to the element's font face.
        Browser dependent results. CSS2 recommends a computed value between 1.0 and 1.2.</dd>

<dt><b class="subheading">[number]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b><i class="fs">N4</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        This number is a multiplier to determine the line height as a factor of the current
        element font-size. To determine the line height from the [number], multiply the
        current element font-size by the [number]. Child elements will inherit the
        multiplying factor. Negative values are not allowed.</dd>

<dt><b class="subheading">[length]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE3</i></b>|<b class="s">N4</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        This sets the 'line-height' to an explicit length value. Negative values are not allowed.</dd>

<dt><b class="subheading">[percentage]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE3</i></b>|<b class="s">N4</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        This number is also a multiplier (like [number]) used to determine the line height
        as a factor of the current element font-size. To determine the line height from the
        [percentage], multiply the current element computed 'font-size' by the [percentage].
        Negative values are not allowed.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">div.test</b> {
        <span class="property">line-height:</span>
        160%; <span class="property">font-size:</span> 10pt }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">div</b>
        <span class="tagattrib">STYLE</span>=&quot;<span
        class="property">line-height:</span> 160%; <span
        class="property">font-size:</span>
        10pt&quot;&gt;text&lt;/<b class="tagname">div</b>&gt;</div>
</dl>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">Internet Explorer</b>
        <dl>
            <dd><b class="alert2">3.0:</b>
            <dd>- Extra line-height amounts are applied to the tops of elements
                (occurred until 4.0 Beta 1.)
            <dd>- The value of "normal" is understood but the result is severely
                overlapped content.
            <dd>- Integer multiplier values are treated like pixel values.
            <dd>- Negative values are rendered as overlapping content (negative
                values should be ignored.)
            <dd>- This property does not apply to form buttons (input
                TYPE=button|reset|submit)
            <dd>- This property applies to table elements, but not table cells (TD/TH.)
            <dd><b class="alert2">4.0+:</b>
            <dd>- The property can now apply to form buttons, affecting button height.
            <dd>- This property has no effect on input TYPE=checkbox|radio and images.
            <dd>- Line height for form text fields (input TYPE=password|text) can be
                controlled by this property, but only the content within the field is
                affected - not the field's height.
        </dl>
    <li><b class="alert">Netscape</b>
        <dl>
            <dd><b class="alert2">4.x:</b>
            <dd>- Extra line-height amounts are applied to the tops of elements
            <dd>- Negative values are rendered as overlapping content (negative
                values should be ignored.)
            <dd>- This property has no effect on inline elements, table structures,
                images, list items or DD elements.
            <dd>- Reported elsewhere: This property can cause unnecessary linefeeds when
                printing in some cases. A reported work around is to use relative length
                measures instead of absolute.
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
            <dd><b class="alert2">3.5:</b>
            <dd>- This property has no effect on form fields and images
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>